<!DOCTYPE html>
{% load staticfiles %}
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="{% static 'css/detail.css' %}"  media="screen" title="no title" charset="utf-8">
    </head>
    <body>
        <div class="ui inverted top fixed menu borderless red menu">
            <div class="header item">
                <div class="ui image">
                    <img src="{% static 'images/tenlogo.png' %}" alt="" />
                </div>
            </div>

            <div class="right menu">
                {% if request.user.is_authenticated %}
                    <div class="item">
                        <h5 class="ui inverted header">
                            <span style="margin-right:20px;">{{ request.user.username }}</span>
                            <div class="ui mini circular image">
                                {% if request.user.profile.profile_image %}
                                    <img src="/upload/{{ request.user.profile.profile_image }}" alt="" />
                                {% else %}
                                    <img src="http://semantic-ui.com/images/avatar/small/matt.jpg" alt="" />
                                {% endif %}

                            </div>
                        </h5>
                    </div>
                    <div class="item">
                        <a href="{% url 'logout' %}" class="ui inverted circular button">Logout</a>
                    </div>

                {% else %}

                    <div class="item">
                        <h5 class="ui inverted header">
                            <span style="margin-right:20px;">{{ request.user.username }}</span>
                            <div class="ui mini circular image">
                                <img src="http://semantic-ui.com/images/avatar/small/matt.jpg" alt="" />
                            </div>
                        </h5>
                    </div>
                    <div class="item">
                        <a href="#" class="ui inverted circular button">Signup/Login</a>
                    </div>
                {% endif %}


            </div>

        </div>
        <div class="ui vertical inverted detail segment" style="background-image: url({% static 'images/detail.jpg' %})"></div>

            <div class="ui basic segment container">
                <h1 class="ui header">{{ vid_info.title }}</h1>
                <i class="icon grey unhide"></i>
                <span style="color:#bbbbbb">10K</span>
                <span class="" style="color:rgb(226, 226, 226)">|</span>
                <i class="icon grey checkmark"></i>
                <span style="color:#bbbbbb">{{ like_counts }} people got it</span>
                <p>
                    {{ vid_info.content }}
                </p>
                <div class="ui divider"></div>
                <form class="ui form" action="{% url 'vote' vid_info.id %}" method="post">
                    {% csrf_token %}

                        {% if user_ticket.choice == 'like'  %}
                            <button class="ui red tiny button" type="submit" name="vote" value="normal" >
                                <i class="icon checkmark"></i>
                                Get it!
                            </button>

                            <button class="ui  tiny button" type="submit" name="vote" value="dislike" >
                                <i class="icon bomb"></i>
                                Hmmm...
                            </button>

                        {% elif user_ticket.choice == 'dislike' %}

                            <button class="ui tiny button" type="submit" name="vote" value="like" >
                                <i class="icon checkmark"></i>
                                Get it!
                            </button>

                            <button class="ui red tiny button" type="submit" name="vote" value="normal" >
                                <i class="icon bomb"></i>
                                Hmmm...
                            </button>

                        {% else %}
                            <button class="ui  tiny button" type="submit" name="vote" value="like" >
                                <i class="icon checkmark"></i>
                                Get it!
                            </button>

                            <button class="ui  tiny button" type="submit" name="vote" value="dislike" >
                                <i class="icon bomb"></i>
                                Hmmm...
                            </button>

                        {% endif %}



                        <button class="ui secondary circular tiny right floated pin icon button">
                            <i class="pin icon"></i>
                            Saved
                        </button>


                </form>
            </div>

    </body>
</html>
